<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row >
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.farmName" placeholder="请选择园区" @change="farmChange">
                  <a-select-option
                      v-for="(item, index) in farmList"
                      :key="index" :value="item.FarmId">
                    {{item.FarmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择地块" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.greenHouseName" placeholder="请选择地块" @change="houseChange">
                  <a-select-option
                      v-for="(item, index) in greenHouseList"
                      :key="index" :value="item.GreenHouseId">
                    {{item.GreenHouseName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <div style="margin: 3px 0 0 8px;">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="dataInit">重置</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-space class="operator">
        <a-button @click="add" type="primary">新建</a-button>
      </a-space>
      <standard-table style="margin-top: 10px"
                      :rowKey="(data, index) => index"
                      :columns="columns"
                      :dataSource="devList"
      >
        <div slot="description" slot-scope="{text}">
          {{text}}
        </div>
        <div slot="action" slot-scope="{text, record}">
          <a-popconfirm title="确定删除?" @confirm="delRecord(record)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="#" style="margin-right: 8px; color: #f5222d"><a-icon type="delete" />删除</a>
          </a-popconfirm>
          <a style="margin-right: 8px; color: #e6a23c" @click="setUp(record)">
            <a-icon type="setting"/>设置
          </a>
        </div>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
  import StandardTable from '@/components/table/StandardTable'
  import { list as farmList } from '@/services/farm'
  import { list as greenHouseList } from '@/services/greenhouse'
  import { list as devList, del } from '@/services/dev'
  const columns = [
    {
      title: '设备ID',
      dataIndex: 'DevId',
      scopedSlots: { customRender: 'DevId' }
    },
    {
      title: '设备名称',
      dataIndex: 'DevName',
      scopedSlots: { customRender: 'DevName' }
    },
    {
      title: '设备编号',
      dataIndex: 'DevCode',
      scopedSlots: { customRender: 'DevCode' }
    },
    {
      title: '链接时间',
      dataIndex: 'ConnTime',
      scopedSlots: { customRender: 'ConnTime' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: "DevIndex",
    data() {
      return {
        columns,
        farmList: [],
        greenHouseList: [],
        devList: [],
        index: null, // dev索引
        data: {}, //修改属性
        query: {
          farmId: undefined,
          farmName: undefined,
          greenHouseId: undefined,
          greenHouseName: undefined,
          devId: undefined,
          devName: undefined
        },
      }
    },
    components: {
      StandardTable
    },
    computed: {
      buttonFieldName(value, map) {
        return (value, map) => {
          let obj = map.find(item => item.Value == value)
          return obj.DisplayValue
        }
      }
    },
    created() {
      this.getFarmList()
    },
    methods: {
      async getFarmList() {
        let res = await farmList()
        this.farmList = res.Data
      },
      async getGreenHouseList() {
        let res = await greenHouseList(this.query.farmId)
        this.greenHouseList = res.Data
      },
      async search() {
        if(!this.query.greenHouseId) {
          this.$message.error('地块未先择')
          return
        }
        let res = await devList(this.query.greenHouseId)
        this.devList = res.Data
      },
      delRecord(row) {
        if(!row.DevId) {
          this.$message.error('无效设备')
          return
        }
        del(row.DevId).then(res => {
          if(res.Code == 0) {
            this.$message.success('删除成功')
            this.search()
          } else this.$message.error('删除失败')
        }).catch(err => {
          console.log(err);
          this.$message.error('删除失败')
        })
      },
      farmChange(e) {
        this.query.farmId = e
        this.queryInit()
        this.getGreenHouseList()
      },
      houseChange(e) {
        this.query.greenHouseId = e
      },
      queryInit() {
        this.query.greenHouseId = undefined
        this.query.greenHouseName = undefined
      },
      dataInit() {
        // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空的
        Object.assign(this.$data, this.$options.data())
        this.getFarmList()
      },
      setUp(obj) {

        this.$router.push({
          path: '/dev/setup',
          query: {
            devCode: obj.DevCode || '',
            devName: obj.DevName || '',
          }
        })
      },
      add() {

      }
    }
  }
</script>

<style scoped>

</style>
